<template>
  <el-tabs v-model="activeTabPan" type="border-card" editable class="demo-tabs" @tab-click="tabClickHandler"
    @tab-remove="tabRemoveHandler">
    <template #add-icon>
      <el-dropdown>
        <el-icon class="el-icon--right"><arrow-down />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="tabRemoveHandler(activeTabPan)">关闭当前</el-dropdown-item>
            <el-dropdown-item @click="tabRemoveOutherHandler(activeTabPan)">关闭其它</el-dropdown-item>
            <el-dropdown-item @click="tabRemoveHandlers()">关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
    <el-tab-pane v-for="(item, index) in tabs" :name="item.name" style="height: 100%;">
      <template #label>
        <span class="custom-tabs-label">
          <span>{{ item.name }}</span>
        </span>
      </template>
      <div class="tab-content">
        <component :is="item.component"></component>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { ref, defineAsyncComponent, markRaw } from "vue"
import managerHome from "@/views/manager/home/index.vue"
import utils from "@/common/utils.js"
export default {
  name: "dxTab",
  components: {
    managerHome,
  },
  data() {
    return {
      activeTabPan: "首页",
      tabs: [{ id: 1, src: "managerHome", component: 'managerHome', name: "首页" }],
    }
  },
  created() {
    let paramsObj = utils.getHrefSeachParams()
    if (Object.keys(paramsObj).length) {
      this.addToTabs(paramsObj.name, paramsObj.src, paramsObj.index)
    }
  },
  methods: {
    addToTabs(name, src, index) {
      name = decodeURI(name);
      // 查询是否存在
      const activePan = this.tabs.find(x => x.name == name && x.src == src)
      // console.log(this.tabs,activePan);
      if (activePan) {
        this.activeTabPan = name
        return
      }
      this.tabs.push({
        name: name,
        src: src,
        index: index,
        component: markRaw(defineAsyncComponent(() => import(`${src}`)))
      })
      this.activeTabPan = name
    },
    tabClickHandler(pane) {
      this.activeTabPan = pane.props.name
      if (this.activeTabPan == '首页') {
        window.history.replaceState(null, null, `./tab`);
        return
      }
      const activePan = this.tabs.find(x => x.name == this.activeTabPan)
      window.history.replaceState(null, null, `./tab?src=${activePan.src}&name=${activePan.name}&index=${activePan.index}`);
    },
    tabRemoveHandler(name) {
      if (name == '首页') {
        return
      }
      const removeTabIndex = this.tabs.findIndex(x => x.name == name)
      this.tabs.splice(removeTabIndex, 1)
      let defaltActivePan = this.tabs.at(-1)
      this.activeTabPan = defaltActivePan.name
      if (this.activeTabPan != "首页") {
        window.history.replaceState(null, null, `./tab?src=${defaltActivePan.src}&name=${defaltActivePan.name}&index=${defaltActivePan.index}`);
      } else {
        window.history.replaceState(null, null, `./tab`);
      }
      this.setTopNavAndLeftNav()
    },
    tabRemoveHandlers(){
      let removeTabs = this.tabs.filter(x=>x.name != "首页")
      removeTabs.forEach(x=>this.tabRemoveHandler(x.name))
      this.setTopNavAndLeftNav()
    },
    tabRemoveOutherHandler(name){
      let removeTabs = this.tabs.filter(x=>x.name != "首页" && x.name != name)
      removeTabs.forEach(x=>this.tabRemoveHandler(x.name))
      this.setTopNavAndLeftNav()
    },
    // 定义公共设置激活top和left
    setTopNavAndLeftNav(){
      this.$emit("setActiveIndex")
    }
  },
  watch: {
    '$route.query': {
      handler(newv, oldv) {
        this.addToTabs(newv.name, newv.src, newv.index)
      }
    }
  }
}
</script>
<style>
/* @import url(); 引入css类 */
.el-tabs,
.tab-content {
  height: calc(95% - 0px);
}

.el-tabs__content {
  height: calc(95% - 0px);
}
.el-dropdown>.el-icon{
  margin: 0px;
}
.el-tabs__new-tab{
  margin-right: 5px;
}
#tab-首页>i.el-icon{
  display: none;
}
</style>